<template>
	<view class="">
		<view
			class='tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-xs tn-padding-right-xs tn-padding-top-sm tn-padding-bottom-sm'>
			<view class="tn-text-xl">
				<!-- <text class=' tn-icon tn-icon-left-triangle'></text>-->
				<text>集采招标信息</text>
			</view>
			<tn-button shape="round" backgroundColor="#ff1313" fontSize="30" width="200rpx" height="60rpx"
				fontColor="tn-color-white" @click="toDetails">我的信息
			</tn-button>
		</view>
		<view class="CentralizedProcurementBiddingInformation tn-padding-sm tn-padding-left tn-padding-right">
			<view class="tn-flex tn-flex-row-between tn-padding-bottom-xs" style="border-bottom: 1px solid #6c6c6c;">
				<text>招标信息</text>
				<text>装饰建材</text>
				<view class="" @click="selectShow=true">
					<text>距离</text>
					<text class="tn-margin-left-xs tn-margin-right-xs">{{selectStr}}km</text>
					<text class="tn-icon-down-triangle"></text>
				</view>
			</view>
			<view class="tn-padding-left tn-padding-right tn-padding-top-sm tn-padding-bottom-sm tn-text-sm"
				v-for="v in listData" :key="v" @click="toTenderDetails(v)">
				<view class="tn-flex tn-flex-row-between tn-margin-bottom-xs">
					<text class="tn-text-ellipsis">{{v.title}}</text>
					<text class="tn-text-ellipsis">报名截止：{{v.create_at}}</text>
				</view>
				<view class="tn-flex tn-flex-row-between">
					<view class="">
						<text class="tn-margin-right-sm">参与数：</text>
						<text>{{v.count}}</text>
					</view>
					<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center">
						<text class="tn-margin-right-sm">总预算：</text>
						<text>{{v.totle}}元</text>
					</view>
					<view class="">
						<text class="tn-margin-right-sm">名额：</text>
						<text>{{10-v.number}}</text>
					</view>
				</view>
			</view>
		</view>
		<tn-select v-model="selectShow" mode="single" :list="selectList" @confirm="selectConfirm"></tn-select>
	</view>
</template>

<script>
	import {
		zhaoListApi
	} from '../../apis/CentralizedApi.js'
	export default {
		data() {
			return {
				selectShow: false,
				listData: [],
				selectList: [{
						value: 10,
						label: '10km'
					},
					{
						value: 20,
						label: '20km'
					},
					{
						value: 30,
						label: '30km'
					},
					{
						value: 50,
						label: '50km'
					}
				],
				selectStr: 20
			};
		},
		onLoad() {
			let thsi = this;
			this.listFun(thsi.selectStr);
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			selectConfirm(e) {
				this.selectStr = e[0].value;
				this.listFun(e[0].value);
			},
			listFun(gongli) {
				zhaoListApi(gongli).then(res => {
					if (res.data.msg == '成功') {
						this.listData = res.data.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toTenderDetails(v) {
				uni.navigateTo({
					url: `/pages/TenderDetails/TenderDetails?id=${v.id}`
				})
			},
			toDetails() {
				uni.navigateTo({
					url: `/pages/MerchantApplication/MerchantApplication?type=1`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.CentralizedProcurementBiddingInformation {
		width: 750rpx;
		border-radius: 20rpx;
		border: 1px solid #c1c1c1;
		box-shadow: 1px 2px 10px #d8d8d8;

		&>view {
			border-bottom: 1px solid #d8d8d8;
		}

		&>view:last-child {
			border-bottom: none;
		}
	}
</style>
